<template>
  <el-dialog title="套餐详情" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="100px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="套餐名称">
            <el-input v-model="dataForm.title" placeholder="套餐名称" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间">
            <el-input v-model="dataForm.createTime" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="套餐形式">
            <el-radio-group v-model="dataForm.setmealModel" disabled>
              <el-radio :label="1">单一优惠方式</el-radio>
              <el-radio :label="2">多种优惠方式</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="生效时间">
            <el-input v-model="dataForm.startTime" placeholder="套餐名称" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="截至时间">
            <el-input v-model="dataForm.endTime" placeholder="套餐名称" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="套餐类型">
            <el-select v-model="dataForm.type" placeholder="请选择套餐类型" disabled>
              <el-option label="框镜销售" value="1"></el-option>
              <el-option label="隐形销售" value="2"></el-option>
              <el-option label="辅料销售" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="套餐价格区间">
            <el-col :span="11">
              <el-input v-model="dataForm.setmealPriceMin" readonly></el-input>
            </el-col>
            <el-col :span="2">至</el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.setmealPriceMax" readonly></el-input>
            </el-col>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="套餐总金额">
            {{dataForm.setmealPrice}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="允许累计积分" prop="allowIntegral" disabled>
            <el-radio-group v-model="dataForm.allowIntegral">
              <el-radio :label="1">允许</el-radio>
              <el-radio :label="0">不允许</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="允许累加" prop="allowCumulative">
            <el-radio-group v-model="dataForm.allowCumulative" disabled>
              <el-radio :label="1">允许</el-radio>
              <el-radio :label="0">不允许</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="折上折" prop="allowDiscount">
            <el-radio-group v-model="dataForm.allowDiscount" disabled>
              <el-radio :label="1">允许</el-radio>
              <el-radio :label="0">不允许</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="21">
          <el-form-item label="查询部门">
            <el-input type="textarea" v-model="dataForm.deptName" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0">
            <el-button @click="openDeptDialog" disabled>选择</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input type="textarea" v-model="dataForm.memo" placeholder="备注" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-tabs type="border-card" v-if="dataForm.setmealModel == 1">
        <el-tab-pane label="单一优惠方式">
          <el-divider content-position="left">商品信息</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="整单满">
                <el-col :span="11">
                  <el-input v-model="dataForm.totalPriceMin" placeholder="整单满最小值" readonly></el-input>
                </el-col>
                <el-col :span="2">至</el-col>
                <el-col :span="11">
                  <el-input v-model="dataForm.totalPriceMax" placeholder="整单满最大值" readonly></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-col :span="9">
                <el-form-item label="优惠方式">
                  <el-select v-model="dataForm.preferentialWay" disabled>
                    <el-option label="打折" :value="2"></el-option>
                    <el-option label="返现" :value="3"></el-option>
                    <el-option label="特价" :value="4"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="15">
                <el-input v-model="dataForm.preferentialWayInfo" disabled></el-input>
              </el-col>
            </el-col>
          </el-row>
          <el-divider content-position="left">购买商品</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="购买方式">
                <el-radio-group v-model="dataForm.buyMode" disabled>
                  <el-radio label="1">任选其一</el-radio>
                  <el-radio label="2">符合全部</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="avue-crud">
            <el-table :data="buyGoodsList" border @selection-change="handleSelectionChange1">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="ctgId" label="商品类别">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.ctgId" disabled>
                    <el-option v-for="item in ctgOption" :value="item.id" :label="item.name" :key="item.id"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="viewGoodsName" label="商品名称" width="300"></el-table-column>
              <el-table-column prop="price" label="商品原价区间"></el-table-column>
              <el-table-column prop="setmealPrice" label="套餐价格区间" width="240">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.setmealPriceMin" style="width: 100px;" readonly></el-input>-<el-input v-model="scope.row.setmealPriceMax" style="width: 100px;" readonly></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="goodsQuantity" label="销售数量"></el-table-column>
              <el-table-column prop="consumerPrices" label="消费满" width="240">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.consumerPricesMin" style="width: 100px;" readonly></el-input>至<el-input
                    v-model="scope.row.consumerPricesMax" style="width: 100px;" readonly></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs type="border-card" v-if="dataForm.setmealModel == 2">
        <el-tab-pane label="多种优惠方式">
          <el-divider content-position="left">商品信息</el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="整单满">
                <el-col :span="11">
                  <el-input v-model="dataForm.totalPriceMin" placeholder="整单满最小值" readonly></el-input>
                </el-col>
                <el-col :span="2" style="text-align: center;">至</el-col>
                <el-col :span="11">
                  <el-input v-model="dataForm.totalPriceMax" placeholder="整单满最大值" readonly></el-input>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>

          <el-divider content-position="left">购买商品</el-divider>
          <el-row>
            <el-col :span="12">
              <el-form-item label="购买方式">
                <el-radio-group v-model="dataForm.buyMode" disabled>
                  <el-radio label="1">任选其一</el-radio>
                  <el-radio label="2">符合全部</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="avue-crud">
            <el-table :data="buyGoodsList" border @selection-change="handleSelectionChange1">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="ctgId" label="商品类别">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.ctgId" disabled>
                    <el-option v-for="item in ctgOption" :value="item.id" :label="item.name" :key="item.id"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="viewGoodsName" label="商品名称" width="300"></el-table-column>
              <el-table-column prop="price" label="商品原价区间"></el-table-column>
              <el-table-column prop="setmealPrice" label="套餐价格区间" width="240">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.setmealPriceMin" style="width: 100px;" readonly></el-input>-<el-input
                    v-model="scope.row.setmealPriceMax" style="width: 100px;" readonly></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="goodsQuantity" label="销售数量"></el-table-column>
              <el-table-column prop="consumerPrices" label="消费满" width="240">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.consumerPricesMin" style="width: 100px;" readonly></el-input>至<el-input
                    v-model="scope.row.consumerPricesMax" style="width: 100px;" readonly></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="preferentialWay" label="优惠方式"></el-table-column>
              <el-table-column prop="XXX" label="套餐单价"></el-table-column>
              <el-table-column prop="preferentialWayInfo" label="特价金额"></el-table-column>
            </el-table>
          </div>

          <el-divider content-position="left">优惠商品</el-divider>
          <el-form-item label="优惠方式">
            <el-radio-group v-model="dataForm.discountMode">
              <el-radio label="1">任选其一</el-radio>
              <el-radio label="2">符合全部</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="avue-crud">
            <el-table :data="discountGoodsList" border @selection-change="handleSelectionChange2">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="ctgId" label="商品类别">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.ctgId" disabled>
                    <el-option v-for="item in ctgOption" :value="item.id" :label="item.name" :key="item.id"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="viewGoodsName" label="商品名称" width="300"></el-table-column>
              <el-table-column prop="price" label="商品原价区间"></el-table-column>
              <el-table-column prop="setmealPrice" label="套餐价格区间" width="240">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.setmealPriceMin" style="width: 100px;" readonly></el-input>-<el-input
                    v-model="scope.row.setmealPriceMax" style="width: 100px;" readonly></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="goodsQuantity" label="销售数量"></el-table-column>
              <el-table-column prop="consumerPrices" label="消费满" width="240">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.consumerPricesMin" style="width: 100px;" readonly></el-input>至<el-input
                    v-model="scope.row.consumerPricesMax" style="width: 100px;" readonly></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="preferentialWay" label="优惠方式"></el-table-column>
              <el-table-column prop="XXX" label="套餐单价"></el-table-column>
              <el-table-column prop="deptName" label="特价金额">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.preferentialWayInfo" disabled></el-input>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <goods-list v-if="goodsListVisible" ref="sinleGoodsList" @updateForm="updateFormData"></goods-list>
    </el-form>
    <search-dept v-if="deptVisible" ref="deptDialog" @refreshData="getDeptData"></search-dept>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'Vuex'
  import { getCtgList } from '@/api/eims/ctg'
  import { getObj, addObj, putObj } from '@/api/eims/set-meal'
  import SearchDept from './SearchDept'
  import GoodsList from "./SearchGoods"

  export default {
    data() {
      return {
        visible: false,
        deptVisible: false,
        goodsListVisible: false,
        dataList: [],
        buyGoodsList: [],
        discountGoodsList: [],
        dataForm: {
          id: 0,
          title: '',
          setmealModel: '',
          type: '',
          setmealPriceMin: '',
          setmealPriceMax: '',
          originalPrice: '',
          setmealPrice: '',
          startTime: '',
          endTime: '',
          allowIntegral: '',
          allowCumulative: '',
          allowDiscount: '',
          auditStatus: '',
          failureStatus: '',
          failureTime: '',
          disuseUser: '',
          preferentialWay: '',
          preferentialWayInfo: '',
          totalPriceMin: '',
          totalPriceMax: '',
          memo: '',
          createTime: '',
          deptIds: [],
          deptName: '',
          buyMode: '2',
          discountMode: '2',
          goodsBuyList: [],
          goodsCheapList: []
        },
        buySelectList: [],
        discountSelectList: [],
        selectlistRow: [],
        ctgOption: [],
        dataRule: {}
      }
    },
    computed: {
      ...mapGetters(['userInfo', 'bizData'])
    },
    components: {
      SearchDept,
      GoodsList
    },
    created() {
      this.getCtgList()
    },
    methods: {
      init(id) {
        this.dataForm.id = id
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            getObj(this.dataForm.id).then(response => {
              if(response.data.code == '0'){
                this.dataForm = response.data.data
                this.dataForm.deptName = response.data.data.deptNames.join(',')
                this.buyGoodsList = response.data.data.goodsBuyList
                this.discountGoodsList = response.data.data.goodsCheapList
              }else{
                this.$message.error(response.data.msg)
              }
            })
          }
        })
      },
      //  打开查询部门弹窗
      openDeptDialog() {
        this.deptVisible = true
        this.$nextTick(() => {
          this.$refs.deptDialog.init()
        })
      },
      //  获取选择部门数据
      getDeptData(data) {
        let ids = []
        let names = []
        if (data.length) {
          data.forEach(item => {
            ids.push(item.id)
            names.push(item.name)
          })
        }
        this.dataForm.deptName = names.join(',')
        this.dataForm.deptIds = ids
      },
      // 选择事件 得到选中的数据
      handleSelectionChange(data) {
        this.selectlistRow = data
      },
      handleSelectionChange1(data) {
        this.buySelectList = data
      },
      handleSelectionChange2(data) {
        this.discountSelectList = data
      },
      //  获取商品类型列表
      getCtgList() {
        getCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgOption = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 打开商品列表弹窗
      addGoodsBySingle(row, type) {
        // 判断是否选中制造商
        if (!row.ctgId) {
          this.$message.warning("请选择商品类别");
          return;
        }
        let params = {
          ctgId: row.ctgId
        };
        let data = {
          params: params,
          data: row
        };
        this.goodsListVisible = true;
        this.$nextTick(() => {
          this.$refs.sinleGoodsList.init(data, type);
        });
      },
      //更新表单数据
      updateFormData(data) {
        switch (data.type) {
          case 'buy':
            {
              this.buyGoodsList.forEach((item, index) => {
                if (item.timestamp == data.timestamp) {
                  this.buyGoodsList[index] = data
                }
              })
            };
          case 'discount':
            {
              this.discountGoodsList.forEach((item, index) => {
                if (item.timestamp == data.timestamp) {
                  this.buyGoodsList[index] = data
                }
              })
            }
        }
        // let list = []
        // data.forEach(item => {
        //   list.push({
        //     goodsId: item.id,
        //     ctgId: item.ctgId,
        //     viewGoodsName: item.viewGoodsName,
        //     price: item.price +" 至 "+ item.price,
        //     number: ''
        //   });
        // })
        // this.buyGoodsList = list
        // this.dataForm.goodsBuyList = this.buyGoodsList
      },
    }
  }
</script>

<style>
  .el-border {
    width: 300px;
    height: 60px;
    border: solid 1px #000000;
    position: relative;
  }

  .border-title {
    position: absolute;
    left: 30px;
    top: -10px;
    background-color: #fff;
  }
</style>
